<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>成绩查询</title>
  <link rel="stylesheet" href="/public/lib/element-ui/index.css">
  <script src="/public/lib/vue.js"></script>
  <script src="/public/lib/element-ui/index.js"></script>
  <script src="/public/lib/axios.min.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
      background-color: #f5f5f5;
    }
    .query-container {
      padding: 20px;
    }
    .query-card {
      background-color: white;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 30px;
    }
    .query-header {
      border-bottom: 1px solid #ebeef5;
      padding-bottom: 20px;
      margin-bottom: 30px;
    }
    .query-header h3 {
      margin: 0;
      color: #303133;
    }
    .query-info {
      margin-bottom: 20px;
      padding: 15px;
      background-color: #f0f9ff;
      border-radius: 4px;
      border-left: 4px solid #409EFF;
    }
    .table-container {
      margin-top: 20px;
    }
    .loading-container {
      text-align: center;
      padding: 50px 0;
    }
    .no-data {
      text-align: center;
      padding: 50px 0;
      color: #909399;
    }
    .time-notice {
      text-align: center;
      padding: 50px 0;
      color: #f56c6c;
    }
    .high-score {
      color: #67c23a;
      font-weight: bold;
    }
    .low-score {
      color: #f56c6c;
      font-weight: bold;
    }
    .medium-score {
      color: #e6a23c;
    }
    .semester-header {
      background-color: #f5f7fa;
      font-weight: bold;
    }
    .stats-card {
      margin-bottom: 20px;
      padding: 15px;
      background-color: #f8f9fa;
      border-radius: 4px;
    }
    .stats-item {
      display: inline-block;
      margin-right: 30px;
    }
    .stats-label {
      font-size: 14px;
      color: #606266;
    }
    .stats-value {
      font-size: 18px;
      font-weight: bold;
      color: #409EFF;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="query-container">
    <div class="query-card">
      <div class="query-header">
        <h3>成绩查询</h3>
        <p style="color: #909399; margin-top: 10px;">您可以在此查询您的课程成绩</p>
      </div>

      <!-- 统计信息 -->
      <div class="stats-card" v-if="scores.length > 0">
        <div class="stats-item">
          <div class="stats-label">课程总数</div>
          <div class="stats-value">{{ scores.length }}</div>
        </div>
        <div class="stats-item">
          <div class="stats-label">平均成绩</div>
          <div class="stats-value">{{ averageScore.toFixed(2) }}</div>
        </div>
        <div class="stats-item">
          <div class="stats-label">最高分</div>
          <div class="stats-value">{{ maxScore }}</div>
        </div>
        <div class="stats-item">
          <div class="stats-label">最低分</div>
          <div class="stats-value">{{ minScore }}</div>
        </div>
      </div>

      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <i class="el-icon-loading" style="font-size: 24px;"></i>
        <p>正在加载成绩信息...</p>
      </div>

      <!-- 时间限制提示 -->
      <div v-else-if="timeRestricted" class="time-notice">
        <i class="el-icon-time" style="font-size: 48px; margin-bottom: 20px;"></i>
        <h3>{{ timeMessage }}</h3>
        <p style="font-size: 14px; margin-top: 10px;">请在此时间段内查询成绩：{{ queryTimeRange }}</p>
      </div>

      <!-- 无数据状态 -->
      <div v-else-if="scores.length === 0" class="no-data">
        <i class="el-icon-document" style="font-size: 48px; margin-bottom: 20px;"></i>
        <p>暂无成绩记录</p>
        <p style="font-size: 14px;">您还没有任何成绩记录，请等待教师录入</p>
      </div>

      <!-- 成绩表格 -->
      <div v-else class="table-container">
        <el-table
                :data="groupedScores"
                style="width: 100%"
                :default-sort="{prop: 'semester', order: 'descending'}">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table
                      :data="props.row.courses"
                      style="width: 100%"
                      :show-header="true">
                <el-table-column prop="course_name" label="课程名称"></el-table-column>
                <el-table-column prop="score" label="分数" width="120">
                  <template slot-scope="scope">
                                            <span :class="getScoreClass(scope.row.score)">
                                                {{ scope.row.score }}
                                            </span>
                  </template>
                </el-table-column>
                <el-table-column prop="create_time" label="录入时间" width="180">
                  <template slot-scope="scope">
                    {{ formatDateTime(scope.row.create_time) }}
                  </template>
                </el-table-column>
                <el-table-column prop="update_time" label="最后修改时间" width="180">
                  <template slot-scope="scope">
                    {{ formatDateTime(scope.row.update_time) }}
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column prop="semester" label="学期" sortable></el-table-column>
          <el-table-column prop="courseCount" label="课程数量" width="120"></el-table-column>
          <el-table-column prop="averageScore" label="平均分" width="120">
            <template slot-scope="scope">
                                <span :class="getScoreClass(scope.row.averageScore)">
                                    {{ scope.row.averageScore.toFixed(2) }}
                                </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        loading: true,
        scores: [],
        timeRestricted: false,
        timeMessage: '',
        queryTimeRange: ''
      };
    },
    computed: {
      // 按学期分组成绩
      groupedScores() {
        const groups = {};

        this.scores.forEach(score => {
          if (!groups[score.semester]) {
            groups[score.semester] = {
              semester: score.semester,
              courses: [],
              courseCount: 0,
              totalScore: 0
            };
          }

          groups[score.semester].courses.push(score);
          groups[score.semester].courseCount++;
          groups[score.semester].totalScore += parseFloat(score.score);
        });

        // 计算每个学期的平均分
        Object.keys(groups).forEach(semester => {
          groups[semester].averageScore = groups[semester].totalScore / groups[semester].courseCount;
        });

        return Object.values(groups);
      },
      // 计算平均分
      averageScore() {
        if (this.scores.length === 0) return 0;
        const total = this.scores.reduce((sum, score) => sum + parseFloat(score.score), 0);
        return total / this.scores.length;
      },
      // 计算最高分
      maxScore() {
        if (this.scores.length === 0) return 0;
        return Math.max(...this.scores.map(score => parseFloat(score.score)));
      },
      // 计算最低分
      minScore() {
        if (this.scores.length === 0) return 0;
        return Math.min(...this.scores.map(score => parseFloat(score.score)));
      }
    },
    mounted() {
      this.getScores();
    },
    methods: {
      getScores() {
        axios.get('/api/student/scores')
                .then(response => {
                  this.loading = false;
                  if (response.data.success) {
                    this.scores = response.data.scores;
                  } else {
                    // 检查是否是时间限制导致的错误
                    if (response.data.message && response.data.message.includes('查询时间')) {
                      this.timeRestricted = true;
                      this.timeMessage = response.data.message;

                      // 提取查询时间段信息
                      const timeMatch = response.data.message.match(/查询时间：(.+) 至 (.+)$/);
                      if (timeMatch) {
                        this.queryTimeRange = `${timeMatch[1]} - ${timeMatch[2]}`;
                      }
                    } else {
                      this.$message.error(response.data.message);
                    }
                  }
                })
                .catch(error => {
                  this.loading = false;
                  console.error('获取成绩错误:', error);
                  this.$message.error('获取成绩失败');
                });
      },
      getScoreClass(score) {
        const numScore = parseFloat(score);
        if (numScore >= 90) {
          return 'high-score';
        } else if (numScore < 60) {
          return 'low-score';
        } else {
          return 'medium-score';
        }
      },
      formatDateTime(dateTimeString) {
        if (!dateTimeString) return '';
        const date = new Date(dateTimeString);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}`;
      }
    }
  });
</script>
</body>
</html>